<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>客户系统</el-breadcrumb-item>
			<el-breadcrumb-item>我的学生</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<!-- 表单 -->
			<el-form :inline="true" v-bind:model="formInline" class="demo-form-inline">
				<el-form-item label="名称">
					<el-input v-model="formInline.Name" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="formInline.Age" placeholder="请输入年龄"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" round>搜索</el-button>
					<el-button type="primary" @click="exportExcel" round>导出Excel</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table @cell-dblclick="handle"  :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
				<el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
				<el-table-column prop="Id" label="编号">
				</el-table-column>
				<el-table-column prop="Name" label="姓名">
				</el-table-column>
				<el-table-column prop="Age" label="年龄">
				</el-table-column>
				<el-table-column prop="Sex" label="性别">
				</el-table-column>
				<el-table-column prop="StuStatus" label="状态">
				</el-table-column>
				<el-table-column prop="PerState" label="学历">
				</el-table-column>
				<el-table-column prop="Phone" label="电话">
				</el-table-column>
				<el-table-column prop="QQ" label="QQ">
				</el-table-column>
				<el-table-column prop="Weixin" label="微信">
				</el-table-column>
				<el-table-column prop="AskerName" label="咨询师名称">
				</el-table-column>
				<el-table-column label="操作" width="310px">
					<template  slot-scope="scope">
						<el-button size="mini" type="success" @click="show(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="Delete(scope.row.Id)">删除</el-button>
						<el-button size="mini" type="warning" @click="Gen(scope.row)">跟踪</el-button>
						<el-button size="mini" type="info" @click="dialogRunFormVisible=true">日志</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper " :total="count">
			</el-pagination>
			<!-- 添加 -->
			<el-dialog title="添加学生" :visible.sync="dialogAddFormVisible" @close="adddialogclosed">
				<el-form :model="addform" ref="addFormRef">
					<el-form-item label="学生姓名" prop="Name" :label-width="formLabelWidth">
						<el-input v-model="addform.Name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="Sex" :label-width="formLabelWidth">
						<el-input v-model="addform.Sex" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="年龄" prop="Age" :label-width="formLabelWidth">
						<el-input v-model="addform.Age" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="Phone" :label-width="formLabelWidth">
						<el-input v-model="addform.Phone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="StuStatus" :label-width="formLabelWidth">
						<el-input v-model="addform.StuStatus" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="学历" prop="PerState" :label-width="formLabelWidth">
						<el-input v-model="addform.PerState" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="QQ" prop="QQ" :label-width="formLabelWidth">
						<el-input v-model="addform.QQ" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="微信" prop="Weixin" :label-width="formLabelWidth">
						<el-input v-model="addform.Weixin" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="咨询师名称" :label-width="formLabelWidth">
						<el-select v-model="addform.AskerId" placeholder="请选择咨询师">
						      <el-option v-for="item in ZiXunShiList" :label="item.LoginName" :value="item.Id"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogAddFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addUser">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑 -->
			<el-dialog title="编辑学生" :visible.sync="dialogEditFormVisible" @close="Editdialogclosed">
				<el-form :model="Editform" ref="EditFormRef">
					<el-form-item label="学生姓名" prop="Name" :label-width="formLabelWidth">
						<el-input v-model="Editform.Name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="Sex" :label-width="formLabelWidth">
						<el-input v-model="Editform.Sex" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="年龄" prop="Age" :label-width="formLabelWidth">
						<el-input v-model="Editform.Age" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="Phone" :label-width="formLabelWidth">
						<el-input v-model="Editform.Phone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="StuStatus" :label-width="formLabelWidth">
						<el-input v-model="Editform.StuStatus" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="学历" prop="PerState" :label-width="formLabelWidth">
						<el-input v-model="Editform.PerState" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="QQ" prop="QQ" :label-width="formLabelWidth">
						<el-input v-model="Editform.QQ" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="微信" prop="Weixin" :label-width="formLabelWidth">
						<el-input v-model="Editform.Weixin" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="咨询师名称" :label-width="formLabelWidth">
						<el-select v-model="Editform.AskerId" placeholder="请选择咨询师">
						      <el-option v-for="item in ZiXunShiList" :label="item.LoginName" :value="item.Id"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogEditFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="EditUser">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 跟踪 -->
			<el-dialog title="跟踪学生" :visible.sync="dialogGenFormVisible" @close="Gendialogclosed">
				<el-form :model="Genform" ref="GenFormRef">
					<el-form-item label="学生编号" prop="StudentId" :label-width="formLabelWidth" >
						<el-input v-model="Genform.StudentId" auto-complete="off" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="学生姓名" prop="StudentName" :label-width="formLabelWidth" >
						<el-input v-model="Genform.StudentName" auto-complete="off" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="跟踪方式" prop="FollowType" :label-width="formLabelWidth">
						<el-input v-model="Genform.FollowType" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="回访情况" prop="FollowState" :label-width="formLabelWidth">
						<el-input v-model="Genform.FollowState" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="跟踪时间" prop="FollowTime" :label-width="formLabelWidth">
						 <el-date-picker v-model="Genform.FollowTime" type="datetime" placeholder="选择日期"></el-date-picker>
					</el-form-item>
					<el-form-item label="内容" prop="Content1" :label-width="formLabelWidth">
						<el-input v-model="Genform.Content1" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="下次跟踪时间" prop="NextFollowTime" :label-width="formLabelWidth">
						<el-date-picker v-model="Genform.NextFollowTime" type="datetime" placeholder="选择日期"></el-date-picker>
					</el-form-item>
					<el-form-item label="咨询师名称" :label-width="formLabelWidth">
						<el-select v-model="Genform.AskerId" placeholder="请选择咨询师">
						      <el-option v-for="item in ZiXunShiList" :label="item.LoginName" :value="item.Id"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogGenFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="GenUser">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 日志 -->
			<el-dialog title="日志学生" :visible.sync="dialogRunFormVisible" @close="Rundialogclosed">
				<!-- 表单 -->
				<el-form :inline="true" v-bind:model="RunformInline" class="demo-form-inline"  ref="RunFormRef">
					<el-form-item label="名称">
						<el-input v-model="RunformInline.StudentName" placeholder="请输入名称"></el-input>
					</el-form-item>
					<el-form-item label="跟踪方式">
						<el-select v-model="RunformInline.FollowType" placeholder="请选择跟踪方式">
							<el-option label="全部" value=""></el-option>
							<el-option label="面谈" value="面谈"></el-option>
							<el-option label="电话" value="电话"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit2" round>搜索</el-button>
					</el-form-item>
				</el-form>
				<!-- 表格 -->
				<el-table :data="RuntableData" border style="width: 100%">
					<el-table-column prop="Id" label="编号">
					</el-table-column>
					<el-table-column prop="StudentName" label="姓名">
					</el-table-column>
					<el-table-column prop="FollowTime" label="跟踪时间">
					</el-table-column>
					<el-table-column prop="Content1" label="内容">
					</el-table-column>
					<el-table-column prop="NextFollowTime" label="下次跟踪时间">
					</el-table-column>
					<el-table-column prop="FollowType" label="跟踪方式">
					</el-table-column>
					<el-table-column prop="FollowState" label="回访情况">
					</el-table-column>
					<el-table-column prop="UserName" label="跟踪人">
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination @size-change="RunhandleSizeChange" @current-change="RunhandleCurrentChange" :current-page="RunformInline.page"
				 :page-sizes="[5, 10, 15, 20]" :page-size="RunformInline.limit" layout="total, sizes, prev, pager, next, jumper " :total="RunformInline.count">
				</el-pagination>
			</el-dialog>
			<!-- 详情 -->
			<el-dialog title="详情" :visible.sync="dialogXiangFormVisible" @close="Xiangdialogclosed">
				<el-form :model="Xiangform" ref="XiangFormRef">
					<el-form-item label="学生姓名" prop="Name" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.Name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="Sex" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.Sex" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="年龄" prop="Age" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.Age" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="Phone" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.Phone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="StuStatus" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.StuStatus" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="学历" prop="PerState" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.PerState" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="QQ" prop="QQ" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.QQ" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="微信" prop="Weixin" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.Weixin" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="咨询师名称"  prop="AskerName" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.AskerName" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline:{
					Name:"",
					Age:""
				},
				RunformInline: {
					StudentName: "",
					FollowType: "",
					page:1,
					limit:5,
					count:0
				},
				page:1,
				limit:5,
				count:0,
				tableData:[],
				RuntableData:[],
				dialogAddFormVisible:false,
				dialogEditFormVisible:false,
				dialogGenFormVisible:false,
				dialogRunFormVisible:false,
				dialogXiangFormVisible:false,
				addform:{},
				Editform:{},
				Genform:{},
				Xiangform:{},
				formLabelWidth: "120px",
				ZiXunShiList:[],
				multipleSelection:[]
			}
		},
		created() {
			this.getTableList();
			this.getTableList2();
			this.GetZiXunShiList();
		},
		methods: {
			handle(row, column, event, cell) {
			        this.dialogXiangFormVisible = true;
			        this.Xiangform = row;
			      },
			handleSelectionChange(val) {
			        this.multipleSelection = val;
			},
			async getTableList2() {
				const {
					data: res
				} = await this.$http.get('api/WangLuo/GetList', {
					params: {
						page: this.RunformInline.page,
						limit: this.RunformInline.limit,
						StudentName: this.RunformInline.StudentName,
						FollowType: this.RunformInline.FollowType
					}
				})
				this.RunformInline.count = res.count;
				this.RuntableData = res.data;
			},
			async Delete(Id){
				const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err =>err)
				if(confirmResult!='confirm'){
					this.$message.info("已取消删除")
				}else{
					const {data:res}= await this.$http.post('api/Student/Delete',{Id})
					if(res.code==0){
						this.$message.success("删除成功")
						this.getTableList()
					}else{
						this.$message.error(res.msg)
					}
				}
			},
			Gen(row){
				this.Genform=row;
				this.dialogGenFormVisible=true;
			},
			GenUser(){
				this.$refs.GenFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Student/GenUser', this.Genform)
					if (res.code == -1) {
						this.$message.error("跟踪失败！")
					}else{
						this.$message.success("跟踪成功！");
						this.dialogGenFormVisible = false;
						this.getTableList();
					}
				})
			},
			async getTableList() {
				const {
					data: res
				} = await this.$http.get('api/Student/GetList', {
					params: {
						UserId:parseInt(window.sessionStorage.getItem("token")) ,
						page: this.page,
						limit: this.limit,
						Name: this.formInline.Name,
						Age: this.formInline.Age
					}
				})
				this.count = res.count;
				this.tableData = res.data;
			},
			exportExcel() {
				require.ensure([], () => {
				  const { export_json_to_excel } = require('../../Excel2/excel.js');
				  const tHeader = ['序号', '姓名', '年龄','性别', '状态', '学历','电话', 'QQ', '微信', '咨询师名称'];
				  // 上面设置Excel的表格第一行的标题
				  const filterVal = ['Id', 'Name', 'Age','Sex', 'StuStatus', 'PerState','Phone', 'QQ', 'Weixin', 'AskerName'];
				  // 上面的index、nickName、name是tableData里对象的属性
				  const list = this.multipleSelection;  //把data里的tableData存到list
				  const data = this.formatJson(filterVal, list);
				  export_json_to_excel(tHeader, data, '学生列表excel');
				})
			},
			formatJson(filterVal, jsonData) {
			      return jsonData.map(v => filterVal.map(j => v[j]))
			},
			async GetZiXunShiList() {
				const {
					data: res
				} = await this.$http.post('api/User/GetZiXunShi')
				this.ZiXunShiList = res;
				console.log(res)
			},
			show(row){
				this.Editform=row;
				this.dialogEditFormVisible=true;
			},
			adddialogclosed(){
				this.$refs.addFormRef.resetFields()
			},
			Rundialogclosed(){
				this.$refs.RunFormRef.resetFields()
			},
			Xiangdialogclosed(){
				this.$refs.XiangFormRef.resetFields()
			},
			Gendialogclosed(){
				this.$refs.GenFormRef.resetFields()
			},
			Editdialogclosed(){
				this.$refs.EditFormRef.resetFields()
			},
			handleSizeChange(val) {
				this.limit = val;
				this.getTableList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTableList()
			},
			RunhandleSizeChange(val) {
				this.RunformInline.limit = val;
				this.getTableList2()
			},
			RunhandleCurrentChange(val) {
				this.RunformInline.page = val;
				this.getTableList2()
			},
			onSubmit(){
				this.getTableList()
			},
			onSubmit2(){
				this.getTableList2()
			},
			//添加处理
			addUser() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Student/AddStu', this.addform)
					if (res.code == -1) {
						this.$message.error("添加失败！")
					}else{
						this.$message.success("添加成功！");
						this.dialogAddFormVisible = false;
						this.getTableList();
					}
				})
			},
			EditUser(){
				this.$refs.EditFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Student/EditStu', this.Editform)
					if (res.code == -1) {
						this.$message.error("编辑失败！")
					}else{
						this.$message.success("编辑成功！");
						this.dialogEditFormVisible = false;
						this.getTableList();
					}
				})
			}
		}
	}
</script>

<style>
	.el-dialog{
		width: 100%;
	}
</style>
